/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* ----- basic configurations ----- */
:root {
    --base-line-height: 1.5;
    --base-focus-color: var(--m-amber-2);
}
html {
    font-family: sans-serif;
}
* {
    box-sizing: border-box;
    position: relative;
    line-height: var(--base-line-height);
}
html, button, input, optgroup, select, textarea {
    display: block;
    line-height: var(--base-line-height);
}
:focus {
    outline: var(--base-focus-color) auto 1px;
    box-shadow: inset 0 0 2px 1px var(--base-focus-color);
}
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
input[type=checkbox] {
    transform: scale(1.5);
}
/* ----- desktop GUI rules ----- */
*:not(input):not(button) {
    user-select: none;
    -webkit-user-select: none;
}
*:not(input):not(button) {
    cursor: default;
}
/* ----- material colors ----- */
:root {
    --m-red: 4;
    --m-red-1: hsl(4, 64%, 40%);
    --m-red-2: hsl(4, 89%, 58%);
    --m-red-3: hsl(3, 89%, 66%);
    --m-pink: 339;
    --m-pink-1: hsl(339, 77%, 36%);
    --m-pink-2: hsl(339, 82%, 51%);
    --m-pink-3: hsl(339, 81%, 61%);
    --m-purple: 291;
    --m-purple-1: hsl(291, 63%, 29%);
    --m-purple-2: hsl(291, 63%, 42%);
    --m-purple-3: hsl(291, 45%, 53%);
    --m-deep-purple: 261;
    --m-deep-purple-1: hsl(261, 52%, 32%);
    --m-deep-purple-2: hsl(261, 51%, 47%);
    --m-deep-purple-3: hsl(261, 46%, 57%);
    --m-indigo: 231;
    --m-indigo-1: hsl(231, 48%, 33%);
    --m-indigo-2: hsl(230, 48%, 47%);
    --m-indigo-3: hsl(231, 43%, 58%);
    --m-blue: 206;
    --m-blue-1: hsl(206, 76%, 38%);
    --m-blue-2: hsl(206, 89%, 54%);
    --m-blue-3: hsl(206, 89%, 63%);
    --m-light-blue: 198;
    --m-light-blue-1: hsl(198, 97%, 33%);
    --m-light-blue-2: hsl(198, 97%, 48%);
    --m-light-blue-3: hsl(198, 91%, 58%);
    --m-cyan: 186;
    --m-cyan-1: hsl(186, 100%, 29%);
    --m-cyan-2: hsl(186, 100%, 41%);
    --m-cyan-3: hsl(186, 70%, 53%);
    --m-teal: 174;
    --m-teal-1: hsl(174, 100%, 20%);
    --m-teal-2: hsl(174, 100%, 29%);
    --m-teal-3: hsl(174, 54%, 43%);
    --m-green: 122;
    --m-green-1: hsl(122, 39%, 34%);
    --m-green-2: hsl(122, 39%, 49%);
    --m-green-3: hsl(123, 38%, 59%);
    --m-light-green: 87;
    --m-light-green-1: hsl(87, 45%, 36%);
    --m-light-green-2: hsl(87, 50%, 52%);
    --m-light-green-3: hsl(87, 50%, 62%);
    --m-lime: 65;
    --m-lime-1: hsl(65, 59%, 38%);
    --m-lime-2: hsl(65, 69%, 54%);
    --m-lime-3: hsl(65, 70%, 63%);
    --m-yellow: 53;
    --m-yellow-1: hsl(53, 62%, 43%);
    --m-yellow-2: hsl(53, 100%, 61%);
    --m-yellow-3: hsl(53, 100%, 69%);
    --m-amber: 45;
    --m-amber-1: hsl(45, 95%, 35%);
    --m-amber-2: hsl(45, 100%, 51%);
    --m-amber-3: hsl(44, 100%, 61%);
    --m-orange: 35;
    --m-orange-1: hsl(35, 100%, 34%);
    --m-orange-2: hsl(35, 100%, 50%);
    --m-orange-3: hsl(35, 100%, 60%);
    --m-deep-orange: 14;
    --m-deep-orange-1: hsl(14, 77%, 39%);
    --m-deep-orange-2: hsl(14, 100%, 56%);
    --m-deep-orange-3: hsl(14, 100%, 65%);
}
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */


